<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <span data-href="/home" class="home">首页</span>
  <span data-href="/list" class="list">列表</span>
  <span data-href="/cart" class="cart">购物车</span>
</body>
<script>

  const home = document.querySelector(".home")
  const list = document.querySelector(".list")
  const cart = document.querySelector(".cart")

  home.onclick = function(){
    location.hash = "#" + this.dataset.href;
  }
  list.onclick = function(){
    location.hash = "#" + this.dataset.href;
  }
  cart.onclick = function(){
    location.hash = "#" + this.dataset.href;
  }

  // 当页面的地址的hash部分发生改变时，会触发该事件
  window.onhashchange = function(){
    console.log(location.hash);
  }

  
</script>
</html>